<template>
    <view class="news-item">
        <view class="content-wrapper">
            <view class="title-section">
                <text class="title">
                    特朗普对华态度缓和！承认美对自华进口商品关税过高 预计将大幅降低
                </text>
            </view>
            <view class="image-section">
                <image src="/static/4.jpg" mode="aspectFill"></image>
            </view>
            <view class="info-section">
                <text class="source">新浪新闻</text>
                <text class="divider">|</text>
                <text class="time">2小时前</text>
                <text class="divider">|</text>
                <text class="views">1.2万浏览</text>
            </view>
        </view>
    </view>
</template>

<style lang="scss">
.news-item {
    padding: 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    .content-wrapper {
        .title-section {
            margin-bottom: 20rpx;
            
            .title {
                font-size: 34rpx;
                line-height: 1.5;
                color: #222;
                font-weight: normal;
            }
        }
        
        .image-section {
            width: 100%;
            height: 300rpx;
            border-radius: 8rpx;
            overflow: hidden;
            margin-bottom: 20rpx;
            
            image {
                width: 100%;
                height: 100%;
            }
        }
        
        .info-section {
            display: flex;
            align-items: center;
            
            text {
                font-size: 24rpx;
                color: #999;
                margin-right: 16rpx;
                
                &.divider {
                    margin: 0 8rpx;
                }
                
                &.source {
                    color: #1976D2;
                }
            }
        }
    }
}
</style>